<template>
  <div class="app-container">
    <div class="filter-item-title">反馈详情</div>
    <div class="filter-item-content">
      <div class="content-line">
        <div>
          <span>APP类型</span><span>{{ detail.createBy }}</span>
        </div>
        <div>
          <span>操作系统</span><span>{{ detail.platform == "3" ? "IOS" : "Android" }}</span>
        </div>
        <div>
          <span>版本名称</span><span>{{ detail.version }}</span>
        </div>
        <div>
          <span>版本号</span><span>{{ detail.version }}</span>
        </div>
        <div>
          <span>是否强制</span><span>{{ detail.isForceUpdate == 1 ? "是" : "否" }}</span>
        </div>
        <div>
          <span>上架状态</span
          ><span><el-switch disabled v-model="detail.status" :active-value="1" :inactive-value="2"></el-switch></span>
        </div>
        <div>
          <span>上传时间</span><span>{{ detail.updateTime }}</span>
        </div>
        <div>
          <span>上架时间</span><span>{{ detail.releaseDate }}</span>
        </div>
        <div>
          <span>APK文件</span
          ><span
            ><el-button type="text" :href="detail.downloadUrl" target="_blank">{{ detail.appName }}</el-button></span
          >
        </div>
        <div>
          <span>上架简介</span><span>{{ detail.description }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="Detail">
import { App } from "@/api/interface/province/base";
import { getAppDetailAPI } from "@/api/modules/province/baseAPI";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const detail = ref<App.Detail>({
  id: 1,
  version: "string",
  platform: "st",
  description: "string",
  remark: "string",
  appName: "string",
  bundleId: "string",
  releaseDate: "2019-08-24T14:15:22.123Z",
  downloadUrl: "string",
  isForceUpdate: -2147483648,
  status: "st",
  createBy: "string",
  createTime: "2019-08-24T14:15:22.123Z",
  updateBy: "string",
  updateTime: "2019-08-24T14:15:22.123Z",
  fileSize: -2147483648
});
const getAppDetail = async () => {
  const { code, data, msg } = await getAppDetailAPI(route.query.id as string);
  if (code == "200" && data) {
    detail.value = data;
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getAppDetail();
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  background-color: white;
}
.filter-item-title {
  font-size: 13px;
  color: black;
}
.filter-item-content {
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e8e8e8;
  .content-line {
    width: 100%;
    div {
      display: inline-block;
      width: 50%;
      padding: 15px 0;
      ::v-deep .el-switch {
        padding: 0;
        margin-left: 10px;
      }
      span:nth-child(1) {
        font-size: 13px;
        color: gray;
        vertical-align: middle;
      }
      span:nth-child(2) {
        margin-left: 10px;
        font-size: 13px;
        color: black;
        vertical-align: middle;
      }
    }
  }
}
.filter-item-input {
  margin-top: 15px;
  .input-textarea {
    display: inline-block;
    width: 90%;
    height: 100px;
    vertical-align: middle;
    border: 1px solid #e8e8e8;
    div {
      height: 100%;
      ::v-deep .el-textarea__inner {
        height: 100%;
      }
    }
  }
  .input-btn {
    display: inline-block;
    width: 10%;
    vertical-align: middle;
    p {
      text-align: right;
    }
  }
}
::v-deep .el-button > span {
  font-size: 13px;
}
</style>
